import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button, Toast, Rate, TextArea } from 'antd-mobile';
import Navbar from '../../compounts/navber/Navbar';

function SimpleDetailPage() {
    const location = useLocation();
    const navigate = useNavigate();
    const [detailData, setDetailData] = useState(null);
    const [isLiked, setIsLiked] = useState(false);
    const [isCollected, setIsCollected] = useState(false);
    const [isFollowing, setIsFollowing] = useState(false);
    const [rating, setRating] = useState(0);
    const [comments, setComments] = useState([]);
    const [commentText, setCommentText] = useState('');
    const [replyingTo, setReplyingTo] = useState(null);
    const [replyText, setReplyText] = useState('');

    // 从路由参数获取详情数据
    useEffect(() => {
        if (location.state) {
            setDetailData(location.state);
        }
    }, [location.state]);

    // 处理点赞
    const handleLike = () => {
        setIsLiked(!isLiked);
        Toast.show({ 
            content: isLiked ? '取消点赞' : '点赞成功', 
            duration: 1000 
        });
    };

    // 处理收藏
    const handleCollect = () => {
        setIsCollected(!isCollected);
        Toast.show({ 
            content: isCollected ? '取消收藏' : '收藏成功', 
            duration: 1000 
        });
    };

    // 处理分享
    const handleShare = () => {
        Toast.show({ 
            content: '分享功能开发中...', 
            duration: 1000 
        });
    };

    // 处理关注/取消关注
    const handleFollowToggle = () => {
        setIsFollowing((prev) => {
            const next = !prev;
            Toast.show({ content: next ? '关注成功' : '已取消关注', duration: 1000 });
            return next;
        });
    };

    // 评分
    const handleRateChange = (val) => {
        setRating(val);
        Toast.show({ content: `评分：${val} 分`, duration: 800 });
    };

    // 发表评论
    const handleSubmitComment = () => {
        const text = commentText.trim();
        if (!text) {
            Toast.show({ content: '请输入评论内容' });
            return;
        }
        const newComment = {
            id: Date.now(),
            user: '我',
            content: text,
            time: new Date().toLocaleString(),
            replies: []
        };
        setComments((prev) => [newComment, ...prev]);
        setCommentText('');
        Toast.show({ content: '评论成功' });
    };

    // 开始回复
    const handleStartReply = (commentId) => {
        setReplyingTo(commentId);
        setReplyText('');
    };

    // 发送回复
    const handleSubmitReply = () => {
        const text = replyText.trim();
        if (!text) {
            Toast.show({ content: '请输入回复内容' });
            return;
        }
        setComments((prev) => prev.map((c) => {
            if (c.id === replyingTo) {
                const reply = {
                    id: Date.now(),
                    user: '我',
                    content: text,
                    time: new Date().toLocaleString()
                };
                return { ...c, replies: [...c.replies, reply] };
            }
            return c;
        }));
        setReplyText('');
        setReplyingTo(null);
        Toast.show({ content: '回复成功' });
    };

    // 如果没有数据，显示加载状态
    if (!detailData) {
        return (
            <div style={{ paddingTop: '45px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
                <Navbar title="详情" />
                <div style={{ textAlign: 'center', padding: '40px 0' }}>
                    <div style={{ fontSize: '16px', color: '#666' }}>加载中...</div>
                </div>
            </div>
        );
    }

    return (
        <div style={{ paddingTop: '45px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
            <Navbar title={detailData.title || '详情'} />
            
            {/* 顶部图片区域 */}
            {detailData.image && (
                <div style={{ 
                    width: '100%', 
                    height: '200px', 
                    position: 'relative',
                    overflow: 'hidden'
                }}>
                    <img 
                        src={detailData.image} 
                        alt={detailData.title || '详情图片'}
                        style={{ 
                            width: '100%', 
                            height: '100%', 
                            objectFit: 'cover'
                        }} 
                    />
                    {/* 图片遮罩 */}
                    <div style={{
                        position: 'absolute',
                        bottom: 0,
                        left: 0,
                        right: 0,
                        height: '60px',
                        background: 'linear-gradient(transparent, rgba(0,0,0,0.6))'
                    }}></div>
                </div>
            )}

            {/* 内容区域 */}
            <div style={{ 
                backgroundColor: '#fff', 
                margin: '16px',
                borderRadius: '12px',
                padding: '20px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
                {/* 标题和操作按钮 */}
                <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'flex-start',
                    marginBottom: '20px'
                }}>
                    <div style={{ flex: 1 }}>
                        <h1 style={{ 
                            fontSize: '20px', 
                            fontWeight: 'bold', 
                            color: '#333',
                            margin: '0 0 8px 0',
                            lineHeight: '1.4'
                        }}>
                            {detailData.title || '详情标题'}
                        </h1>
                        {detailData.subtitle && (
                            <div style={{ 
                                fontSize: '14px', 
                                color: '#666',
                                lineHeight: '1.4'
                            }}>
                                {detailData.subtitle}
                            </div>
                        )}
                    </div>
                    
                    {/* 操作按钮 */}
                    <div style={{ 
                        display: 'flex', 
                        gap: '12px',
                        marginLeft: '16px'
                    }}>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleLike}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: isLiked ? '#ff4d4f' : '#999'
                            }}
                        >
                            {isLiked ? '❤️' : '🤍'}
                        </Button>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleCollect}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: isCollected ? '#faad14' : '#999'
                            }}
                        >
                            {isCollected ? '⭐' : '☆'}
                        </Button>
                        <Button
                            size='small'
                            fill='none'
                            onClick={handleShare}
                            style={{ 
                                padding: '8px',
                                minWidth: 'auto',
                                color: '#999'
                            }}
                        >
                            📤
                        </Button>
                    </div>
                </div>

                {/* 标签信息 */}
                {detailData.tags && detailData.tags.length > 0 && (
                    <div style={{ 
                        display: 'flex', 
                        flexWrap: 'wrap', 
                        gap: '8px',
                        marginBottom: '20px'
                    }}>
                        {detailData.tags.map((tag, index) => (
                            <span key={index} style={{
                                backgroundColor: '#f0f0f0',
                                color: '#666',
                                fontSize: '12px',
                                padding: '4px 8px',
                                borderRadius: '12px'
                            }}>
                                {tag}
                            </span>
                        ))}
                    </div>
                )}

                {/* 详细信息 */}
                <div style={{ 
                    fontSize: '14px', 
                    color: '#333',
                    lineHeight: '1.8',
                    marginBottom: '20px'
                }}>
                    {detailData.description || '这里是详细内容描述...'}
                </div>

                {/* 额外信息 */}
                {detailData.extraInfo && (
                    <div style={{ 
                        backgroundColor: '#f8f9fa',
                        padding: '16px',
                        borderRadius: '8px',
                        marginBottom: '20px'
                    }}>
                        <div style={{ 
                            fontSize: '14px', 
                            fontWeight: 'bold',
                            color: '#333',
                            marginBottom: '8px'
                        }}>
                            相关信息
                        </div>
                        <div style={{ 
                            fontSize: '13px', 
                            color: '#666',
                            lineHeight: '1.6'
                        }}>
                            {detailData.extraInfo}
                        </div>
                    </div>
                )}

                {/* 关注与评分 */}
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    padding: '12px 0',
                    borderTop: '1px solid #f0f0f0',
                    borderBottom: '1px solid #f0f0f0',
                    marginBottom: '16px'
                }}>
                    <Button
                        color={isFollowing ? 'default' : 'primary'}
                        size='small'
                        onClick={handleFollowToggle}
                        style={{ borderRadius: '16px', padding: '0 12px' }}
                    >
                        {isFollowing ? '已关注' : '+ 关注'}
                    </Button>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <span style={{ fontSize: '14px', color: '#666' }}>评分</span>
                        <Rate value={rating} onChange={handleRateChange} allowHalf />
                        <span style={{ fontSize: '12px', color: '#999', width: '34px', textAlign: 'right' }}>{rating || 0}分</span>
                    </div>
                </div>

                {/* 评论输入 */}
                <div style={{ marginBottom: '12px' }}>
                    <TextArea
                        placeholder='写下你的评论...'
                        value={commentText}
                        onChange={setCommentText}
                        rows={2}
                        maxLength={200}
                        showCount
                        style={{ background: '#fafafa' }}
                    />
                    <div style={{ textAlign: 'right', marginTop: '8px' }}>
                        <Button size='small' color='primary' onClick={handleSubmitComment}>发表评论</Button>
                    </div>
                </div>

                {/* 评论列表 */}
                {comments.length > 0 && (
                    <div>
                        <div style={{ fontSize: '16px', fontWeight: 'bold', margin: '8px 0 12px' }}>全部评论</div>
                        {comments.map(c => (
                            <div key={c.id} style={{ padding: '12px 0', borderTop: '1px solid #f5f5f5' }}>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
                                    <div style={{ color: '#333', fontWeight: 'bold' }}>{c.user}</div>
                                    <div style={{ color: '#999', fontSize: '12px' }}>{c.time}</div>
                                </div>
                                <div style={{ color: '#444', fontSize: '14px', lineHeight: '1.6' }}>{c.content}</div>
                                <div style={{ marginTop: '8px' }}>
                                    <Button size='mini' fill='none' onClick={() => handleStartReply(c.id)}>回复</Button>
                                </div>

                                {/* 回复区 */}
                                {c.replies && c.replies.length > 0 && (
                                    <div style={{ background: '#fafafa', borderRadius: '8px', padding: '8px', marginTop: '8px' }}>
                                        {c.replies.map(r => (
                                            <div key={r.id} style={{ borderBottom: '1px dashed #eee', padding: '6px 0' }}>
                                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                    <span style={{ color: '#555', fontWeight: 500 }}>{r.user}</span>
                                                    <span style={{ color: '#aaa', fontSize: '12px' }}>{r.time}</span>
                                                </div>
                                                <div style={{ color: '#666', fontSize: '13px' }}>{r.content}</div>
                                            </div>
                                        ))}
                                    </div>
                                )}

                                {/* 回复输入框 */}
                                {replyingTo === c.id && (
                                    <div style={{ marginTop: '8px' }}>
                                        <TextArea
                                            placeholder='回复内容...'
                                            value={replyText}
                                            onChange={setReplyText}
                                            rows={2}
                                            maxLength={200}
                                            showCount
                                            style={{ background: '#fafafa' }}
                                        />
                                        <div style={{ textAlign: 'right', marginTop: '6px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
                                            <Button size='mini' onClick={() => setReplyingTo(null)}>取消</Button>
                                            <Button size='mini' color='primary' onClick={handleSubmitReply}>发送</Button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}

                {/* 操作按钮区域 */}
                <div style={{ 
                    display: 'flex', 
                    gap: '12px',
                    marginTop: '30px'
                }}>
                    <Button
                        block
                        color='primary'
                        size='large'
                        style={{ 
                            borderRadius: '8px',
                            height: '44px'
                        }}
                    >
                        立即咨询
                    </Button>
                    <Button
                        block
                        fill='outline'
                        size='large'
                        style={{ 
                            borderRadius: '8px',
                            height: '44px'
                        }}
                    >
                        预约挂号
                    </Button>
                </div>
            </div>

            {/* 底部间距 */}
            <div style={{ height: '80px' }}></div>
        </div>
    );
}

export default SimpleDetailPage;



